<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QZBlog</title>
    <!-- <link href="../static/css/bootstrap.css" rel="stylesheet"> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/qz-blog.css">
</head>
<body>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse navbar-static-top c-margin-bo">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand c-text-color" href="../account/index.html" target="_blank">QZ-Bolg</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav c-text-spac">
                    <li><a href="root.html"> <span class="glyphicon glyphicon-home c-icon-magrin"></span><span>首页</span></a></li>
                    <li><a href="blogControl.html"> <span class="glyphicon glyphicon-pencil c-icon-magrin"></span><span>博客管理</span></a></li>
                    <li class="active"><a href="classifyControl.html"><span class="glyphicon glyphicon-folder-open c-icon-magrin"></span><span>分类管理</span></a></li>
                    <li><a href="tagControl.html"><span class="glyphicon glyphicon-tags c-icon-magrin"></span>标签管理</a></li>
                    <li><a href="aboutControl.html"><span class="glyphicon glyphicon-user c-icon-magrin"></span>关于我</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 导航 -->

    <!-- 内容区 -->
   <div class="container">
       <div class="panel panel-default c-panel-top">
           <div class="panel-heading">
               <h3 class="panel-title c-text-color">分类列表</h3>
           </div>
           <div class="panel-body">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>分类名称</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>
                            并发编程
                        </td>
                        <td>
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span>2013-3-26</span> 
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-calendar"></span>
                                <span>2013-3-26</span> 
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  操作 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">编辑</a></li>
                                  <li><a href="#">修改</a></li>
                                  <li role="separator" class="divider"></li>
                                  <li><a href="#">删除</a></li>
                                </ul>
                              </div>
                        </td>
                    </tr>

                    <tr>
                        <th scope="row">1</th>
                        <td>
                            并发编程
                        </td>
                        <td>
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span>2013-3-26</span> 
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-calendar"></span>
                                <span>2013-3-26</span> 
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  操作 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">编辑</a></li>
                                  <li><a href="#">修改</a></li>
                                  <li role="separator" class="divider"></li>
                                  <li><a href="#">删除</a></li>
                                </ul>
                              </div>
                        </td>
                    </tr><tr>
                        <th scope="row">1</th>
                        <td>
                            并发编程
                        </td>
                        <td>
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span>2013-3-26</span> 
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-calendar"></span>
                                <span>2013-3-26</span> 
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  操作 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#">编辑</a></li>
                                  <li><a href="#">修改</a></li>
                                  <li role="separator" class="divider"></li>
                                  <li><a href="#">删除</a></li>
                                </ul>
                              </div>
                        </td>
                    </tr>
                    
                </tbody>
              </table>

              <div class="panel-body">
                <div class="col-md-2 col-md-push-10">
                    <button class="btn btn-info" type="button" data-toggle="modal" data-target=".bs-example-modal-lg" >新增分类</button>
                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                       <div class="modal-dialog modal-lg" role="document">
                         <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="myModalLabel">填写分类信息</h4>
                             </div>
                             <div class="modal-body">
                                    <div class="form-group">
                                      <label for="exampleInputEmail1">分类名称</label>
                                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="填写分类名字">  
                            </div>
                         </div>
                         <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                           <button type="button" class="btn btn-primary">保存</button>
                         </div>
                       </div>
                     </div>
                </div>       
            </div>      
            </div>
             <div class="panel-body">
                 <nav aria-label="...">
                     <ul class="pager">
                     <li><a href="#">上一页</a></li>
                     <li><a href="#">下一页</a></li>
                     </ul>
                 </nav>
             </div>

           </div>
       </div>
   </div>
     

    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
</body>
</html>